<template>
	<div class="yp">
		<div class="hd">
			<text class="fo-30 font-wei600">全部{{opt.name}}</text>
			<view class="relative">
				<text class="cuIcon-sort" @click="showSortMenu(true)"></text>
				<view class="H5-Mask" @touchmove.stop.prevent="H5_Mask_Move" @click="H5_Mask_Cancel" v-if="H5_Mask"></view>
				<view class="sort-memu" v-if="sortMemu_show">
					<view class="listitem flex ali-sta" @click="onSort('name',j)" v-for="(i, j) in sortList" :key="j" :class="i.isActive?'fo-blue':''">
						<text :class="i.icon" class="mr20"></text>
						<text >{{i.name}}</text>
					</view>
				</view>
			</view>
		</div>
		<contents :FolderList.sync="FolderList" :FileList.sync="FileList"></contents>
	</div>
</template>

<script>
import { getSpecifyTypeFile } from '../../../common/API/index.js';
import contents from '../../file/content/index.vue';
export default {
	name: 'FileTypeList',
	components: { contents },
	data() {
		return {
			opt: {}, // 页面传参
			list: [],
			FolderList: [], // 文件夹列表
			FileList: [], // 文件列表
			H5_Mask: false, // 遮罩层
			sortMemu_show: false ,// 是否显示排序菜单
			sortList:[
				{name:"按文件大小排序",icon:'cuIcon-cuIcon',type:"size",isActive:false},
				{name:"按文件名排序",icon:'cuIcon-all',type:"name",isActive:false},
				{name:"按修改时间排序",icon:'cuIcon-countdown',type:"time",isActive:false}
			]
		};
	},
	onLoad(opt) {
		this.opt = opt;
		this.getlist({ FileType: opt.type });
	},
	methods: {
		showSortMenu(bool) {
			this.H5_Mask = bool;
			this.sortMemu_show = this.H5_Mask;
		},
		H5_Mask_Move() {
			return;
		},
		H5_Mask_Cancel() {
			this.showSortMenu(false);
		},
		onSort(type,index) {
			uni.showLoading({mask:true,title:'排序中~'})
			this.sortList[index].isActive = true
			setTimeout(()=>{
				this.showSortMenu(false);
				this.sortList[index].isActive = false
				uni.hideLoading()
			},1000)
		},
		async getlist(json) {
			let res = await getSpecifyTypeFile(json);
			if (res.code === 200) {
				this.$pub.Toast(res.msg);
				for (let [inx, item] of Object.entries(res.data)) {
					item.type = this.$tool.getFileType(item.name);
					this.FileList.push(Object.assign({ checked: false }, item));
				}
			}
		}
	}
};
</script>

<style lang="less" scoped>
.hd {
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.sort-memu {
	z-index: 99999;
	background-color: #ffffff;
	position: absolute;
	left: -270rpx;
	top: 60rpx;
	box-shadow: -1px 1px 2px 0px #eee, inset -1px 1px 2px 0px #eee;
	border-radius: 10rpx;
	.listitem {
		justify-content: flex-start;
		width: 300rpx;
		padding: 30rpx;
		box-shadow: 0px 1px #f1f1f1;
	}
}
.H5-Mask {
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.1);
	z-index: 99998;
}
</style>
